<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0">
<title>折叠面板 &middot; Bootstrap</title>
<!-- Bootstrap 核心CSS -->
<link href="../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 本文档额外专用css -->
<link href="../assets/css/docsearch.min.css" rel="stylesheet">
<link href="../assets/css/docs.min.css" rel="stylesheet">

<!-- Favicons图标定义 -->
<link rel="apple-touch-icon" href="../assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="../assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="../assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
  
<link rel="mask-icon" href="../assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="../favicon.ico">
<meta name="msapplication-config" content="../assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">

<!-- Meta关键字定义 -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">

<!-- Twitter -->
<meta name="twitter:site" content="@getbootstrap">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Introduction">
<meta name="twitter:description" content="折叠面板 Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.">
<meta name="twitter:image" content="../assets/brand/bootstrap-social.png">

<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/getting-started/introduction/">
<meta property="og:title" content="Introduction">
<meta property="og:description" content="折叠面板 Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.">
<meta property="og:type" content="website">
<meta property="og:image" content="../assets/brand/bootstrap-social.png">
<meta property="og:image:secure_url" content="../assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
</head>
<body>
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
<div class="container"> <span class="skiplink-text">跳到主体内容</span> </div>
</a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <a class="navbar-brand mr-0 mr-md-2" href="../index.html" aria-label="Bootstrap">
  <svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false">
    <title>Bootstrap</title>
    <path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/>
    <path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/>
  </svg>
  </a>
  <div class="navbar-nav-scroll">
    <ul class="navbar-nav bd-navbar-nav flex-row">
      <li class="nav-item"><a class="nav-link " href="../index.html">首页</a></li>
      <li class="nav-item"><a class="nav-link active" href="../docs/index.html">中文手册</a></li>
      <li class="nav-item"><a class="nav-link " href="../examples/index.html">实例</a></li>
      
      
      
      
    </ul>
  </div>
  
  <a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="../components/download.html">下载 Bootstrap</a> </header>

<div class="container-fluid">
  <div class="row flex-xl-nowrap">
    <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
      


<nav class="collapse bd-links" id="bd-docs-nav">
  <div class="bd-toc-item"> <a class="bd-toc-link" href="../docs/index.html"> 快速入门 </a>
    <ul class="nav bd-sidenav">
    <li><a href="../docs/index.html">关于</a></li>
    <li><a href="../docs/download.html">下载</a></li>
    <li><a href="../docs/contents.html">目录结构</a></li>
    <li><a href="../docs/browsers-devices.html">浏览器与设备调优</a></li>
    <li><a href="../docs/javascript.html">JavaScript脚本</a></li>
    <li><a href="../docs/theming.html">主题化</a></li>
    <li><a href="../docs/build-tools.html">编译工具</a></li>
    <li><a href="../docs/webpack.html"> Webpack模块化</a></li>
    <li><a href="../docs/accessibility.html">无障碍浏览</a></li>
    </ul>
  </div>
  <div class="bd-toc-item"> <a class="bd-toc-link" href="../layout/overview.html"> 布局 </a>
    <ul class="nav bd-sidenav">
    <li><a href="../layout/overview.html">概述</a></li>
    <li><a href="../layout/grid.html">栅格</a></li>
    <li><a href="../layout/utilities-for-layout.html"> 布局实施建议 </a> </li>
    </ul>
  </div>
<div class="bd-toc-item"> <a class="bd-toc-link" href="../content/reboot.html">内容 </a>
  <ul class="nav bd-sidenav">
    <li><a href="../content/reboot.html"> 初始化与CSS重置 </a> </li>
    <li><a href="../content/typography.html"> 排版 </a> </li>
    <li><a href="../content/code.html"> 代码 </a> </li>
    <li><a href="../content/images.html"> 图片 </a> </li>
    <li><a href="../content/tables.html"> 表格 </a> </li>
    <li><a href="../content/figures.html"> 图文框 </a> </li>
  </ul>
</div>
<div class="bd-toc-item active"> <a class="bd-toc-link" href="alerts.html"> 组件 </a>
  <ul class="nav bd-sidenav">
    <li><a href="alerts.html"> 警告提示框(Alerts) </a> </li>
    <li><a href="badge.html"> 徽章(Badge) </a> </li>
    <li><a href="breadcrumb.html"> 面包屑导航(Breadcrumb) </a> </li>
    <li><a href="buttons.html"> 按钮(Button) </a> </li>
    <li><a href="button-group.html"> 按钮组(Button-group) </a> </li>
    <li><a href="card.html"> 卡片(Card) </a> </li>
    <li><a href="carousel.html">  轮播效果(Carousell) </a> </li>
    <li class="active bd-sidenav-active"><a href="collapse.html"> 折叠面板(Collapse) </a> </li>
    <li><a href="dropdowns.html"> 下拉菜单(Dropdown) </a> </li>
    <li><a href="forms.html"> 表单(Form) </a> </li>
    <li><a href="input-group.html"> 输入框(Input-group) </a> </li>
    <li><a href="jumbotron.html"> Hero大块屏(Jumbotron) </a> </li>
    <li><a href="list-group.html"> 列表组(List-group) </a> </li>
    <li><a href="media-object.html"> 媒体对象/图文混排(Media-object) </a> </li>
    <li><a href="modal.html"> 弹出模态框(Modal) </a> </li>
    <li><a href="navs.html"> 导航/滑动门(Nav) </a> </li>
    <li><a href="navbar.html"> 导航栏(Navbar) </a> </li>
    <li><a href="pagination.html"> 分页(Pagination) </a> </li>
    <li><a href="popovers.html"> POP提示(Popover) </a> </li>
    <li><a href="progress.html"> 进度条(Progress) </a> </li>
    <li><a href="scrollspy.html"> 滚动监听(Scrollspy) </a> </li>
    <li><a href="spinners.html"> 旋转特效(Spinners) </a> </li>
    <li><a href="toasts.html"> 弹出提示框(Toasts) </a> </li>
    <li><a href="tooltips.html"> 提示冒泡(Tooltip) </a> </li>
  </ul>
</div>
<div class="bd-toc-item"> <a class="bd-toc-link" href="../utilities/borders.html"> 公共样式 </a>
  <ul class="nav bd-sidenav">
    <li><a href="../utilities/borders.html"> 边框(border) </a> </li>
    <li><a href="../utilities/clearfix.html"> 清动浮动(clearfix) </a> </li>
    <li><a href="../utilities/close-icon.html"> 关闭图标(close icon) </a> </li>
    <li><a href="../utilities/colors.html"> 颜色(color) </a> </li>
    <li><a href="../utilities/display.html"> Display显示属性 </a> </li>
    <li><a href="../utilities/embed.html"> 嵌入(embed) </a> </li>
    <li><a href="../utilities/flex.html"> Flex弹性布局 </a> </li>
    <li><a href="../utilities/float.html"> Float浮动属性 </a> </li>
    <li><a href="../utilities/image-replacement.html"> 图像替换 </a> </li>
	<li><a href="../utilities/overflow.html"> 溢出 </a> </li>
    <li><a href="../utilities/position.html"> Position固顶(底)及定位 </a> </li>
    <li><a href="../utilities/screenreaders.html"> 读屏器 (Screenreaders)</a></li>
    <li><a href="../utilities/shadows.html"> 阴影(shadows)</a></li>
    <li><a href="../utilities/sizing.html"> 规格(sizi)</a></li>
    <li><a href="../utilities/spacing.html"> 间隔(spacing) </a> </li>
    <li><a href="../utilities/text.html"> 文本处理 </a> </li>
    <li><a href="../utilities/vertical-align.html"> 垂直对齐(vertical align) </a> </li>
    <li><a href="../utilities/visibility.html"> Visibility显示或隐藏(能见度)处理 </a> </li>
  </ul>
</div>
<div class="bd-toc-item"> <a class="bd-toc-link" href="../extend/approach.html"> 延伸 </a>
  <ul class="nav bd-sidenav">
	<li> <a href="../extend/approach.html"> 方法论 </a> </li>
    <li><a href="../extend/icons.html"> 图标 </a> </li>
  </ul>
</div>
<div class="bd-toc-item"> <a class="bd-toc-link" href="../migration/index.html"> 迁移 </a>
  <ul class="nav bd-sidenav">
  </ul>
</div>
<div class="bd-toc-item"> <a class="bd-toc-link" href="../about/history.html"> 关于 </a>
  <ul class="nav bd-sidenav">
    <li> <a href="../about/history.html"> 成长历史 </a> </li>
    <li> <a href="../about/team.html"> 项目团队 </a> </li>
    <li> <a href="../about/brand.html"> 品牌标志 </a> </li>
    <li> <a href="../about/license.html"> 许可授权 </a> </li>
    <li> <a href="../about/translations.html"> 翻译 </a> </li>
  </ul>
</div>
</nav>
</div>



<div class="d-none d-xl-block col-xl-2 bd-toc">
  <ul class="section-nav">
    <li class="toc-entry toc-h2"><a href="#how-it-works">如何运作</a></li>
    <li class="toc-entry toc-h2"><a href="#example">例子</a></li>
    <li class="toc-entry toc-h2"><a href="#multiple-targets">多目标控制</a></li>
    <li class="toc-entry toc-h2"><a href="#accordion-example">手风琴折叠范例</a></li>
    <li class="toc-entry toc-h2"><a href="#accessibility">无障碍浏览提示(易用性)</a></li>
    <li class="toc-entry toc-h2"><a href="#usage">用法</a>
      <ul>
        <li class="toc-entry toc-h3"><a href="#via-data-attributes">利用data数据属性</a></li>
        <li class="toc-entry toc-h3"><a href="#via-javascript">利用JavaScript</a></li>
        <li class="toc-entry toc-h3"><a href="#options">选项</a></li>
        <li class="toc-entry toc-h3"><a href="#methods">方法</a>
          <ul>
            <li class="toc-entry toc-h4"><a href="#collapseoptions">.collapse(options)</a></li>
            <li class="toc-entry toc-h4"><a href="#collapsetoggle">.collapse('toggle')</a></li>
            <li class="toc-entry toc-h4"><a href="#collapseshow">.collapse('show')</a></li>
            <li class="toc-entry toc-h4"><a href="#collapsehide">.collapse('hide')</a></li>
			        <li class="toc-entry toc-h3"><a href="#collapsedispose">.collapse('dispose')</a></li>
          </ul>
        </li>
        <li class="toc-entry toc-h3"><a href="#events">事件</a></li>
      </ul>
    </li>
  </ul>
</div>
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
  <h1 class="bd-title" id="content">折叠面板(Collapse)</h1>
  <p class="bd-lead">Bootstrap折叠板插件允许你在网页中用一点点JavaScript以及CSS类切换内容，控制内容的可见性。它是一个灵活的插件，使用少量的类（来自必需的过渡插件），以方便切换行为。</p>
   
  <h2 id="how-it-works"><span class="bd-content-title">如何运作</span></h2>
  <p>插件用于显示和隐藏内容。 按钮或锚点用作触发器，映射到您切换的特定元素。 折叠元素会将<code class="highlighter-rouge">height</code> 从其当前值设置为<code class="highlighter-rouge">0</code>.使用CSS处理动画的方式，您不能在<code class="highlighter-rouge">.collapse</code> 上使用<code class="highlighter-rouge">padding</code>  相反，使用该类作为独立的包装元素.</p>
  
    <div class="bd-callout bd-callout-info">
<p>此组件的动画效果取决于<code class="highlighter-rouge">prefers-reduced-motion</code> 媒体查询. 请参阅我们的 <a href="https://code.z01.com/docs/4.3/getting-started/accessibility/#reduced-motion">辅助功能文档的简化动作部分</a>.</p>
</div>
  
  <h2 id="example">示例</h2>
  <p>点击下面任何一个按钮，通过类更改显示和隐藏另一个class包含的元素：</p>
  <ul>
    <li><code class="highlighter-rouge">.collapse</code> 隐藏内容</li>
    <li><code class="highlighter-rouge">.collapsing</code> 带动态效果的切换</li>
    <li><code class="highlighter-rouge">.collapse.show</code> 显示内容</li>
  </ul>
  <p>你可以使用带<code class="highlighter-rouge">href</code> 属性的连接,、或者带 <code class="highlighter-rouge">data-target</code> 属性的按钮来创建折叠效果-这两种情况下 <code class="highlighter-rouge">data-toggle="collapse"</code> 属性都是必须的。</p>
  <div class="bd-example">
    <p> <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample"> Link with href </a>
      <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> Button with data-target </button>
    </p>
    <div class="collapse" id="collapseExample">
      <div class="card card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. </div>
    </div>
  </div>
  <div class="highlight">
    <pre><code class="language-html" data-lang="html"><span class="nt">&lt;p&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">href=</span><span class="s">"#collapseExample"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"collapseExample"</span><span class="nt">&gt;</span>
    Link with href
  <span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">"#collapseExample"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"collapseExample"</span><span class="nt">&gt;</span>
    Button with data-target
  <span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"collapse"</span> <span class="na">id=</span><span class="s">"collapseExample"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card card-body"</span><span class="nt">&gt;</span>
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
  </div>
  <h2 id="multiple-targets">多目标控制</h2>
  <p>可以在<code class="highlighter-rouge">&lt;button&gt;</code>或者 <code class="highlighter-rouge">&lt;a&gt;</code> 标签上，通过 JQuery选择器来显示和隐藏多个元素（或者多个<code class="highlighter-rouge">&lt;button&gt;</code>、 <code class="highlighter-rouge">&lt;a&gt;</code>元素来控制显示/隐藏一个元素素）），如果被引用对象的<code class="highlighter-rouge">href</code> 或者  <code class="highlighter-rouge">data-target</code> 属性定义正确。</p>
  <div class="bd-example">
    <p> <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
      <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
      <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
    </p>
    <div class="row">
      <div class="col">
        <div class="collapse multi-collapse" id="multiCollapseExample1">
          <div class="card card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. </div>
        </div>
      </div>
      <div class="col">
        <div class="collapse multi-collapse" id="multiCollapseExample2">
          <div class="card card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. </div>
        </div>
      </div>
    </div>
  </div>
  <div class="highlight">
    <pre><code class="language-html" data-lang="html"><span class="nt">&lt;p&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">href=</span><span class="s">"#multiCollapseExample1"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"multiCollapseExample1"</span><span class="nt">&gt;</span>Toggle first element<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">"#multiCollapseExample2"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"multiCollapseExample2"</span><span class="nt">&gt;</span>Toggle second element<span class="nt">&lt;/button&gt;</span>
  <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">".multi-collapse"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"multiCollapseExample1 multiCollapseExample2"</span><span class="nt">&gt;</span>Toggle both elements<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"collapse multi-collapse"</span> <span class="na">id=</span><span class="s">"multiCollapseExample1"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card card-body"</span><span class="nt">&gt;</span>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"collapse multi-collapse"</span> <span class="na">id=</span><span class="s">"multiCollapseExample2"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card card-body"</span><span class="nt">&gt;</span>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
  </div>
  <h2 id="accordion-example">手风琴折叠范例</h2>
  <p>结合 <a href="https://code.z01.com/docs/4.0/components/card/">card</a> 卡片组件使用，可以扩展折叠组件为手风琴效果。</p>
<div class="bd-example">
<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h2>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"accordion"</span> <span class="na">id=</span><span class="s">"accordionExample"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-header"</span> <span class="na">id=</span><span class="s">"headingOne"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;h2</span> <span class="na">class=</span><span class="s">"mb-0"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-link"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">"#collapseOne"</span> <span class="na">aria-expanded=</span><span class="s">"true"</span> <span class="na">aria-controls=</span><span class="s">"collapseOne"</span><span class="nt">&gt;</span>
          Collapsible Group Item #1
        <span class="nt">&lt;/button&gt;</span>
      <span class="nt">&lt;/h2&gt;</span>
    <span class="nt">&lt;/div&gt;</span>

    <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"collapseOne"</span> <span class="na">class=</span><span class="s">"collapse show"</span> <span class="na">aria-labelledby=</span><span class="s">"headingOne"</span> <span class="na">data-parent=</span><span class="s">"#accordionExample"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-header"</span> <span class="na">id=</span><span class="s">"headingTwo"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;h2</span> <span class="na">class=</span><span class="s">"mb-0"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-link collapsed"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">"#collapseTwo"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"collapseTwo"</span><span class="nt">&gt;</span>
          Collapsible Group Item #2
        <span class="nt">&lt;/button&gt;</span>
      <span class="nt">&lt;/h2&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"collapseTwo"</span> <span class="na">class=</span><span class="s">"collapse"</span> <span class="na">aria-labelledby=</span><span class="s">"headingTwo"</span> <span class="na">data-parent=</span><span class="s">"#accordionExample"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-header"</span> <span class="na">id=</span><span class="s">"headingThree"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;h2</span> <span class="na">class=</span><span class="s">"mb-0"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-link collapsed"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">"#collapseThree"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"collapseThree"</span><span class="nt">&gt;</span>
          Collapsible Group Item #3
        <span class="nt">&lt;/button&gt;</span>
      <span class="nt">&lt;/h2&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"collapseThree"</span> <span class="na">class=</span><span class="s">"collapse"</span> <span class="na">aria-labelledby=</span><span class="s">"headingThree"</span> <span class="na">data-parent=</span><span class="s">"#accordionExample"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></figure>
  
  <h2 id="accessibility">无障碍浏览提示(易用性)</h2>
  <p>建议添加 <code class="highlighter-rouge">aria-expanded</code> 到控件元素中，该属性能明确将与控件相关的可折叠元素之当前状态传达给屏幕阅读器和类似的辅助技术。如果折叠块元素默认是闭合的，它必须拥有一个 <code class="highlighter-rouge">aria-expanded="false"</code>值。如果你用<code class="highlighter-rouge">.show</code>类设置则可以定义折叠控件为默认打开，在控制器上设置<code class="highlighter-rouge"> aria-expanded="true"</code>即可。插件会根据折叠块元素是打开还是关闭的，自动切换这个属性（通过JavaScript，或者因为用户触发的另一个控件元素也绑定到相同的折叠元素）。</p>
  <p>此外，如果控件元素只对准一个单个元素——即<code class="highlighter-rouge">data-target</code>的值指向一个id选择器，你可以给这个控件元素添加额外的aria-controls属性，容纳这个折叠块元素的id。现代的屏幕阅读器以及类似的辅助技术利用这个属性向用户提供额外的快捷方式，直接导航到折叠块元素本身。</p>
  <p>请注意，Bootstrap的当前实现并未涵盖<a href="https://www.w3.org/TR/wai-aria-practices-1.1/#accordion">WAI-ARIA Authoring Practices 1.1 accordion pattern</a>手风琴模式中描述的各种键盘交互 - 您需要使用自定义JavaScript自行包含这些交互.</p>
  
  <h2 id="usage">用法</h2>
  <p>折叠插件使用一些Class类来处理复杂的事务：</p>
  <ul>
    <li><code class="highlighter-rouge">.collapse</code> 隐藏内容</li>
    <li><code class="highlighter-rouge">.collapse.show</code> 显示内容</li>
    <li><code class="highlighter-rouge">.collapsing</code> 在转换开始时被添加，当它完成时则移除。</li>
  </ul>
  <p>这些类可以在<code class="highlighter-rouge">_transitions.scss</code>文件中查阅。</p>
  <h3 id="via-data-attributes">利用data数据属性</h3>
  <p>将 <code class="highlighter-rouge">data-toggle="collapse"</code> 和 <code class="highlighter-rouge">data-target</code> 添加到元素中，可自动指定折叠面板的控制项，其中 <code class="highlighter-rouge">data-target</code> 属性接受CSS选择器，以应用折叠。确保向可折叠面板添加<code class="highlighter-rouge">collapse</code>添加到可折叠面板组件之上。如果你希望它默认是打开的，可定义额外的 <code class="highlighter-rouge">show</code>属性。</p>
  <p>为了给一个折叠块控件添加类似手风琴组的效果，还需要添加data属性<code class="highlighter-rouge">data-parent="#selector"</code>。可以参考下面的演示了解实践例子。</p>
  <h3 id="via-javascript">利用JavaScript</h3>
  <p>人为启用它:</p>
  <figure class="highlight">
    <pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'.collapse'</span><span class="p">).</span><span class="nx">collapse</span><span class="p">()</span></code></pre>
  </figure>
  <h3 id="options">选项</h3>
  <p>可通过data属性或JavaScript传递选项。如用data属性，请把选项名追加到<code class="highlighter-rouge">data-</code>后面（如写为<code class="highlighter-rouge">data-parent=""</code>）。 </p>
  <table class="table table-bordered table-striped table-responsive">
    <thead>
      <tr>
        <th style="width: 100px;">名类</th>
        <th style="width: 50px;">Type类型</th>
        <th style="width: 50px;">默认值</th>
        <th>描述</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>parent</td>
        <td>selector | jQuery object | DOM element </td>
        <td>false</td>
        <td>如果提供了一个选择器，然后当某个折叠块打开时，这个指定的父元素下面所有别的折叠块元素都将自动关闭（类似于传统的手风琴样式 - 这依赖<code>card</code>样式），属性必须在目标可折叠区域上定义。</td>
      </tr>
      <tr>
        <td>toggle</td>
        <td>boolean</td>
        <td>true</td>
        <td>在调用中折叠块元素。</td>
      </tr>
    </tbody>
  </table>
  <h3 id="methods">方法</h3>
  <div class="bd-callout bd-callout-danger">
    <h4 id="asynchronous-methods-and-transitions">异步传输方法和转义</h4>
    <p>所有的API方法都是 <strong>异步传输</strong>和轮换， 一旦 <strong>事件发生（开始）</strong>，<strong>在结束之前</strong>，它们会持续返回给调用者。另外在过渡组件上的方法将被忽略。</p>
    <p>请参阅<a href="../docs/javascript.html">我们的API文档</a>了解更多。</p>
  </div>
  <h4 id="collapseoptions"><code class="highlighter-rouge">.collapse(options)</code></h4>
  <p>启用你的可折叠对象，通过 <code class="highlighter-rouge">object</code>方法。</p>
  <figure class="highlight">
    <pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myCollapsible'</span><span class="p">).</span><span class="nx">collapse</span><span class="p">({</span>
  <span class="na">toggle</span><span class="p">:</span> <span class="kc">false</span>
<span class="p">})</span></code></pre>
  </figure>
  <h4 id="collapsetoggle"><code class="highlighter-rouge">.collapse('toggle')</code></h4>即发生 <code class="highlighter-rouge">shown.bs.collapse</code> 或 <code class="highlighter-rouge">hidden.bs.collapse</code> 事件前)返回给调用者。</p>
  <h4 id="collapseshow"><code class="highlighter-rouge">.collapse('show')</code></h4>
  <p>显示可折叠元素， <strong>在可折叠元素实际显示之前</strong> (即<code class="highlighter-rouge">shown.bs.collapse</code> 事件发生之前)返回给调用者。</p>
  <h4 id="collapsehide"><code class="highlighter-rouge">.collapse('hide')</code></h4>
  <p>隐藏可折叠元素， <strong>在可折叠元素实际上被隐藏之前</strong> (即<code class="highlighter-rouge">hidden.bs.collapse</code> 事件发生之前)返回给调用者。</p>
  <h3 id="collapsedispose"><code class="highlighter-rouge">.collapse('dispose')</code></h3>
  <p>销毁一个元素的折叠。</p>
  <h3 id="events">事件</h3>
  <p>Bootstrap提供为折叠面板提供了一系列事件属性。</p>
  <table class="table table-bordered table-striped table-responsive">
    <thead>
      <tr>
        <th style="width: 150px;">事件类别</th>
        <th>描述</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>show.bs.collapse</td>
        <td>当调用<code>show</code> 方法时，会立即触发事件。</td>
      </tr>
      <tr>
        <td>shown.bs.collapse</td>
        <td>用户可见折叠面板中的块时，会触发此事件（需要等CSS加载过渡完成）。</td>
      </tr>
      <tr>
        <td>hide.bs.collapse</td>
        <td>当调用<code>hide</code> 方法时，立即触发该事件。</td>
      </tr>
      <tr>
        <td>hidden.bs.collapse</td>
        <td>当折叠面板中的块对于用户完全隐藏时（需要等CSS加载过渡完成），会触发该事件）。</td>
      </tr>
    </tbody>
  </table>
  <figure class="highlight">
    <pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myCollapsible'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'hidden.bs.collapse'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
  <span class="c1">// do something…</span>
<span class="p">})</span></code></pre>
  </figure>
</main>
</div>
</div>


<script src="../js/jquery-3.2.1.slim.min.js"></script> 
<script>window.jQuery || document.write('<script src="../assets/js/vendor/jquery-slim.min.js"><\/script>')</script> 
<script src="../dist/js/popper.min.js"></script> 
<script src="../dist/js/bootstrap.min.js"></script> 
<script src="../assets/js/docs.min.js"></script> 
<script src="../assets/js/ie-emulation-modes-warning.js"></script> 
<script src="../assets/js/docsearch.min.js"></script> 
 

</body>
</html>
